<template>
  <div class="mod-config">

    <div ref="chart1"
         style="height: 800px; padding: 20px;display: flex;align-items: center;justify-content: center;"></div>

  </div>




</template>

<script>

import * as echarts from 'echarts'
export default {
  data() {
    return {
      shuju:[],
     shujuShiTi:[],
      diQuList:['华东地区','华南地区','华中地区','华北地区','东北地区','西北地区','西南地区']
    }
  },

  activated() {
    this.getData()
  },
  mounted() {

    // this.getData()
  },
  methods: {
    getData(){

      // this.produceDataSeries()
      this.lessANumber(7,100)
      for (let i = 0; i < this.shuju.length ; i++) {
        this.shujuShiTi.push({'value':this.shuju[i],'name':this.diQuList[i]})

      }
      if(this.shujuShiTi.length == 7){
        this.initCharts()
      }
       this.lessANumber(7,100)

    },
    // 需要产生7个随机数，且7个随机数之和等于100 这个数据都比较接近
    produceDataSeries() {
      //需要产生7个随机数，且7个随机数之和等于100
      let arr = new Array(7).fill(0)
      for (let i = 0; i < 100; i++) {
        //parseInt接收string，所以需要转一趟
        var num = parseInt((Math.random() * 7).toString());
        arr[num]++
      }
      console.log(arr)
      this.shuju=arr
      // return arr;

  },
    // 需要产生7个随机数，且7个随机数之和等于100 这个数据都比较好
    lessANumber(n, v) {
      var i,
        s = 0,
        r = [],
        x = v;
      for (i = 1; i < n; i++) {
        if(i == 1){
          x = Math.random() * 30+1;
        }else{
          x = Math.random() * x/i+1;
        }
        r.push(x.toFixed(0));
        s += x;
        x = v - s;
      }
      r.push(x.toFixed(0));
      console.log('rrrrrrrrrrrrrrrr'+r)
      this.shuju=r
    },
    initCharts(){
      const chart = echarts.init(this.$refs.chart1);
      const option = {
        title: {
          text: '中药材七大产地占比',
          // subtext: 'Fake Data',
          left: 'center',
          textStyle: {
            fontSize: 20,// 设置标题字体大小为20
            left: 'center'
          }
        },
        tooltip: {
          trigger: 'item'

        },
        legend: {
          orient: 'vertical',
          left: 'left',
          padding: [50, 100, 0, 0],
        },
        series: [
          {
            name: '产量占比',
            type: 'pie',
            radius: '50%',
         /*   data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],*/
            data:this.shujuShiTi,
            axisLabel: {
              formatter: '{value} %'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>
<style>
</style>
